import Taro, { Component, Config } from '@tarojs/taro'
import { Button, Input, View, Text } from '@tarojs/components'
import './index.scss'
import classNames from 'classnames'
import { formatAmount } from '@/utils/utils'
import { Loading } from '@/components/index'
import { getUserInfo, getUserCommissions, userCharges, applyDrawToWallet } from '@/api/userApi'

function getAmount(str) {
  const ind = str.indexOf('.')
  return (ind >= 0 ? str.slice(0, ind + 3) : str)
}

export default class Index extends Component {
  state: any
  config: Config = {
    backgroundTextStyle: "dark",
    navigationBarTitleText: '钱包充值'
  }

  constructor() {
    super(...arguments)
    this.state = {
      loading: false,
      typeKey: 0,
      typeList: [
        { title: '账户充值' },
        { title: '佣金转入' },
      ],
      inputVal: '',
      userInfo: {},
      otherInfo: {},
      placeholder: ''
    }
  }

  componentWillMount() {
    this.getInfo()
  }

  //  获取用户信息
  async getInfo() {
    //  获取用户信息
    const userRes = await getUserInfo()
    //  获取佣金信息
    const otherRes = await getUserCommissions()
    this.setState({
      userInfo: userRes.data,
      otherInfo: otherRes.data
    })
  }

  //  输入时触发
  onInput(e) {
    const { value } = e.detail
    const { inputVal } = this.state
    const num = getAmount(isNaN(Number(value)) ? inputVal : value)
    this.setState({
      inputVal: num
    })

    return {
      value: num
    }
  }

  //  聚焦input时触发
  onFocusInput() {
    this.setState({
      placeholder: ''
    })
  }

  //  移出输入框触发
  onBlurInput() {
    this.setState({
      placeholder: '0.00'
    })
  }

  //  切换类型
  onSwitchType(typeKey) {
    this.setState({
      typeKey
    })
  }

  //  佣金转入钱包
  atOnceShift(amount) {
    wx.showLoading({ title: '请稍后', mask: true })
    applyDrawToWallet({ amount }).then(() => {
      wx.hideLoading()
      wx.showToast({ title: '转入成功', icon: 'success' })
      setTimeout(() => {
        wx.navigateBack()
      }, 500)
    })
  }

  //  立即充值
  atOnceRecharge(amount) {
    wx.showLoading({ title: '请稍后', mask: true })
    userCharges({ amount }).then(res => {
      Taro.requestPayment(res.data).then(() => {
        wx.hideLoading()
        wx.showToast({ title: '支付成功', icon: 'success' })
        setTimeout(() => {
          wx.navigateBack()
        }, 500)
      }).catch(() => {
        wx.hideLoading()
        wx.showToast({ title: '支付取消', icon: 'none' })
      })
    })
  }

  render() {
    const { loading, inputVal, placeholder, typeKey, typeList, userInfo, otherInfo } = this.state
    return (<View className='recharge-page'>
      {loading && <Loading/>}
      <View className='recharge-box'>
        <View className='type-list d-f'>
          {typeList.map((i, k) => {
            return (<View key={k} className={classNames('type-item f-g-5', typeKey === k && 'active')} onClick={this.onSwitchType.bind(this, k)}>
              <View className='type-title'>{i.title}</View>
            </View>)
          })}
        </View>
        <View className='money-box d-f a-i-b thin-border__b'>
          <View className='money-unit'>￥</View>
          <View className='money-input'>
            <Input
              type='digit'
              focus={true}
              value={inputVal}
              className='money-input'
              maxLength={10}
              placeholder={placeholder}
              onBlur={this.onBlurInput.bind(this)}
              onFocus={this.onFocusInput.bind(this)}
              onInput={this.onInput.bind(this)}
            />
          </View>
        </View>
        <View className='prompt-box f-g-5'>
          {typeKey === 0 && <View className='prompt-text d-f a-i-b'>提示：当前余额为<Text className='balance-num'>￥{formatAmount(userInfo.amount)}</Text></View>}
          {typeKey === 1 && <View className='prompt-text d-f a-i-b'>提示：当前佣金为<Text className='balance-num'>￥{formatAmount(otherInfo.amount)}</Text></View>}
        </View>
        {typeKey === 0 && <Button disabled={inputVal<0.01} className='recharge-btn f-g-5' onClick={this.atOnceRecharge.bind(this, inputVal)}>立即充值</Button>}
        {typeKey === 1 && <Button disabled={inputVal<0.01} className='recharge-btn f-g-5' onClick={this.atOnceShift.bind(this, inputVal)}>立即转入</Button>}
      </View>
    </View>)
  }
}
